<style lang="scss" >
.z-case-page__left {
  height: var(--z-case-page-height);
}
.z-case-page__center {
  height: var(--z-case-page-height);
}
.z-case-page__right {
  height: var(--z-case-page-height);
}
.z-case-page {
  --z-case-page-body-bg: #fff;
  --z-case-page-height: 85vh;
  --z-case-page-tongji-con: 110px;
  --z-case-page-body-h: calc(var(--z-case-page-height) - var(--z-case-page-tongji-con) );


  box-sizing: border-box;
  .z-crud-table__actions {
    display: none;
  }
  .z-case-page__center {
    background-color: var( --z-case-page-body-bg);
  }
}
.z-case-page__body {
  height: 100%;
  //height: var(--z-case-page-body-h);
  .z-search-table__content {
    --z-search-table__content-h: calc(var(--z-case-page-body-h ) - var(--z-crud-table__actions-height));
    height: var(--z-search-table__content-h);
    overflow: auto;
  }
}
.z-case-page {
  --z-case-page-header-h: 58px;
  &__header {
    position: relative;
    height: var(--z-case-page-header-h);
    //> img {
    //  display: block;
    //}
  }
  &__header-con {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    justify-content: space-between;
  }
  &__title {
    width: 172px;
    height: 26px;
    font-size: 26px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 26px;
    margin-left: 30px;
  }
  &__close {
    margin-right: 30px;
  }
  --z-case-page-actions-h: 48px;
  --z-case-page-action-size: 27px;
  &__actions {
    height: var(--z-case-page-actions-h);
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(123, 123, 123, 0.17);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    > div {
      margin-left: 27px;
    }
  }
  &__action {
    width: var(--z-case-page-action-size);
    height: var(--z-case-page-action-size);
    background-color: var(--z-case-page-action-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    > img {
      //display: block;
      &:nth-child(1) {
        display: block;
      }
      &:nth-child(2) {
        display: none;
      }
    }
    &:hover {
      > img {
        //display: block;
        &:nth-child(1) {
          display: none;
        }
        &:nth-child(2) {
          display: block;
        }
      }
    }
  }
  &__center {

    //padding: 20px 36px;

    box-sizing: border-box;
  }
  &__body {
    width: 100%;
    //height: 100%;
    overflow: auto;
  }
  &-cases {
  padding: 20px 36px;
    //width: calc(100% - 40px);
    box-sizing: border-box;
  }
  &__h {
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    color: #0781FB;
    line-height: 30px;
    display: flex;
    align-items: center;
    margin-bottom: var(--z-case-page-h-mb, 20px);
    position: relative;
    &::before {
      width: 5px;
      height: 30px;
      background: #0781FB;
      content: '';
      display: block;
      //margin-right: 10px;
      position: absolute;
      left: -12px;
    }
    > span {
      margin-left: 5px;
    }
  }
  &__p {
    font-size: 16px;
    font-weight: 400;
    color: #313131;
    line-height: 30px;
  }
  &__case {
    margin-bottom: 70px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .z-descriptions-item-text {
    word-break: break-all;
  }
  .z-descriptions-item > span {
    line-height: 1.6;
  }
  .z-descriptions-item-label {
    width: 80px;
    //line-height: 1;
  }
  .z-descriptions-item-content {
    flex: 1;
    //width: 3em;
    //overflow: hidden;
    //display: block !important;
    //white-space: nowrap;
    //text-overflow: ellipsis;
    //line-height: 1.5;
  }
  &__left {
    border-right: 1px solid #BCBCBC;
  }
  --z-case-tree-width: 236px;
  .z-case-tree {
    width: var(--z-case-tree-width);
    margin-top: 14px;
    .el-tree-node__content {
      //height: 45px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .el-tree-node__children {
      .el-tree-node__content {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }
}
</style>

<template>
  <div class="z-case-page" :class="{'z-case-page--menu': showMenu}">
    <div class="z-case-page__header" :style="{'background-image': `url(${headerBg})`}">
      <div class="z-case-page__header-con">
        <div class="z-case-page__title">{{GET_OPJ('title')}}</div>
        <div class="z-case-page__close" @click="fireEvent('close_click')">
          <img :src="closeImg">
        </div>
      </div>
    </div>
    <div class="z-case-page__actions">
      <z-space column-gap="34px">
        <div class="z-case-page__action" @click="fireEvent('action_click')"
             v-for="action in GET_OPJ('menuOption.actions', [])">
          <img :src="action.icon">
          <img :src="action.hoverIcon">
        </div>
      </z-space>
    </div>
    <zw-layout row :gutter="0" style="align-items: stretch" >
      <div  class="z-case-page__left" v-if="state.showMenu"
               @click="ZS_DEBUG('tree')">
        <z-tree class="z-case-tree" :data="state.treeData"
                @node-click="handleNodeClick"
        ></z-tree>
      </div>
      <div  class="z-case-page__center" style="flex: 1">
        <div class="z-case-page__body">
          
          <div class="z-case-page-cases">
            <div class="z-case-page__case"
                 v-for="section in cusSections"
            >
              <div class="z-case-page__h"><span>{{section.title}}</span></div>
              <div class="z-case-page__p">
                <z-descriptions-grid :bordered="false" :column="4" grid-gap="30px 0" >
                  <template v-for="detail in section.details">
                    <z-descriptions-item
                        :label="detail.label" :span="detail.span">
                      <template v-if="detail.custom"><slot name="desc_item_content" v-bind="{detail, section}"></slot></template>
                      <template v-else><div class="z-descriptions-item-text">{{detail.content}}</div></template>
                    </z-descriptions-item>
                  </template>
                </z-descriptions-grid>
              </div>
            </div>
          </div>

        </div>
      </div>
    </zw-layout>
  </div>
</template>

<script>
import {ZPageMixin} from "./ZPageMixin";
import {createPageTool} from "./hooks";

let headerBg = ''
let closeImg = ''


export default {
  name: "ZCasePage",
  mixins: [
    ZPageMixin
  ],
  props: {
    showMenu: {
      type: Boolean
    }
  },
  computed: {
    cusSections() {
      return this.GET_OPJ('sections', [])
    }
  },
  methods: {
    fireEvent(name, ...args) {
      this.$emit(name, ...args)
    }
  },
  setup(props, outerCtx) {
    // console.log(outerCtx.root.$message)

    const {onMounted, watch} = window.vueCompositionAPI

    let pageTool = createPageTool();
    let ZS_DEBUG = pageTool.ZS_DEBUG;

    let tableCtx;
    let obj = props.obj;
    let objDeepClone = ZY.lodash.cloneDeep(obj)


    if (!obj) {
      console.error('BUG')
    }

    if (!obj.tableOption) {
      obj.tableOption = {}
    }

    if (!obj.request) {
      obj.request = window.Req
    }

    function onCurdInit(ctx) {
      tableCtx = ctx
    }

    let state = ZY.T.state({
      treeData:  [],
      projectID: '',
      tongji: [],
      reloadMap:{
        tree: true,
        table: true,
        panel: true
      },
      layout: {
        main: 24
      },
      showMenu: props.showMenu
    })

    function reloadCom(key) {
      state.reloadMap[key] = false;
      setTimeout(() => {
        state.reloadMap[key] = true;
      }, 300)
    }

    async function reloadTree() {
      // let [err, res] = await ZY.awaitTo(
      //     obj.request.get(obj.treeOption.url))
      // state.treeData = res.result.records
      if (obj?.treeOption?.data) {
        state.treeData = obj?.treeOption?.data
      }
    }

    async function reloadTongji() {
      let [err, res] = await ZY.awaitTo(
          obj.request.get(obj.panelOption.url))
      state.tongji = res.result.records
    }

    onMounted( () => {
      //查询左侧项目树
      reloadTree();
      // reloadTongji();
    })

    function handleNodeClick(value) {
      // obj.columnDefMap.status = value.id
      // tableCtx.table__search({
      //   params: {
      //     projectId: value.id
      //   }
      // })
      // state.projectID = value.id
      outerCtx.emit('tree-node-click', value)
    }

    function onCurdEdit(...args) {
      // console.log(args)
      ZELEMENT.Message.success('成功')
      tableCtx.table__search({
        params: {
          projectId: state.projectID
        }
      })
    }

    async function onCurdDelete(ctx) {
      // console.log('onCurdDelete', ctx)
      await ctx.refs.searchTable.search()
      await ZY.sleep(1000)
    }

    function getObj(path, defVal) {
      return ZY.lodash.get(obj, path, defVal)
    }

    watch(props.obj, (newVal) => {
      // console.log('change', newVal.panelOption.url, objDeepClone.panelOption.url)
      let diffed = ZY.diff(objDeepClone, newVal)
      // console.log(diffed)

      objDeepClone = ZY.lodash.cloneDeep(newVal)
      if (diffed.panelOption) {
        reloadTongji();
      }

      if (diffed.treeOption) {
        reloadTree();
      }

      if (diffed.tableOption) {
        let keys = Object.keys(diffed.tableOption)
        if (keys.length === 1 && keys[0] === 'request') {

        } else {
          reloadCom('table')
        }
      }
    }, {
      deep: true
    })


    return { closeImg, headerBg, state, onCurdInit, onCurdDelete, onCurdEdit, getObj, ZS_DEBUG, handleNodeClick}
  }
}
</script>


